<template>
  <div class="">
    <ul class="con">
      <li v-for="(item, index) in $store.state.celllist" :key="item.id">
        <img :src="item.img" alt="" />

        <h6 class="desc">{{ item.desc }}</h6>
        <h5 class="name">
          <p>{{ item.name }}</p>
          <button @click="remove(index)">移除收藏夹</button>
        </h5>
      </li>
    </ul>

    <button @click="clear">清空收藏夹</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {},
  methods: {
    remove(index) {
      this.$store.commit("remove", index);
    },
    clear() {
      this.$store.commit("clear");
    },
  },
  components: {},
};
</script>

<style lang="scss"></style>
